<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <view class="list-section">
        <view
          class="coupon-item"
          v-for="(item, index) in listData"
          :key="index"
        >
          <view class="date-price flex-x-sb flex-y-center">
            <view>
              <view class="title">{{ item.name }}</view>
              <view class="date" v-if="item.expire_type == 1"
                >{{ $t('facePay.getted')
                }}{{
                  item.expire_day == 0
                    ? $t('member.permanent')
                    : item.expire_day + $t('coupon.date2')
                }}</view
              >
              <view class="date" v-else
                >{{ dateFilter(item.begin_time) }}-{{
                  dateFilter(item.end_time)
                }}</view
              >
            </view>
            <view class="price-box flex-col flex-y-center">
              <!-- 满减卷 -->
              <template v-if="item.discount_type == 2">
                <view
                  >￥<text style="font-size: 56rpx">{{
                    item.sub_price
                  }}</text></view
                >
                <view>
                  {{ $t('coupon.price1') }}{{ item.min_price
                  }}{{ $t('coupon.price2') }}
                </view>
              </template>
              <!-- 打折卷 -->
              <template v-else-if="item.discount_type == 1">
                <view
                  ><text style="font-size: 56rpx">{{ item.discount }}</text
                  >{{ $t('clerk.member2') }}</view
                >
              </template>
            </view>
          </view>

          <view class="note flex-x-sb">
            <view class="left">
              <u-collapse
                class="collapse"
                ref="collapse"
                :head-style="{
                  padding: 0,
                  lineHeight: '48rpx',
                  color: '#666',
                  fontSize: '24rpx',
                }"
                :body-style="{
                  fontSize: '24rpx',
                  color: '#999',
                }"
              >
                <u-collapse-item :title="$t('facePay.detail')">
                  {{ item.rule }}
                </u-collapse-item>
              </u-collapse>
            </view>
            <view class="btn-groups">
              <!-- <view class="share-btn" v-if="item.is_receive == 1"
                                >已领取
                            </view> -->
              <view
                class="use-btn"
                v-if="item.is_receive == 0"
                @click="receiveItem(item)"
                >{{ $t('coupon.toGet') }}</view
              >
              <view class="go-with" v-else @click="onClickUse(item)">{{
                $t('facePay.toUse')
              }}</view>
            </view>
          </view>

          <view class="status">
            <view v-if="item.status == 0">{{ $t('coupon.noUse') }}</view>
            <view v-else-if="item.status == 1">{{ $t('coupon.used') }}</view>
            <view v-else-if="item.status == 2">{{ $t('coupon.expire') }}</view>
          </view>
        </view>
      </view>
    </view>

    <buyCouponPopup ref="buyPopup"></buyCouponPopup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import buyCouponPopup from '../components/coupon/buyCouponPopup.vue';
export default {
  components: {
    Shenhe,
    buyCouponPopup,
  },
  data() {
    return {
      listData: [],
      handleItem: -1,
      showCouponSummary: false,
      couponId: '',
    };
  },
  onLoad(t) {
    if (t?.id) {
      this.couponId = t.id;
    }
    this.storeCouponList();
  },
  computed: {
    dateFilter() {
      return function (str) {
        return this.$utils.turnDate(str * 1000 || 0, 'yyyy-mm-dd');
      };
    },
  },
  filters: {},
  methods: {
    // 获取优惠券列表
    storeCouponList() {
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      this.$allrequest.facePay
        .storeCouponList()
        .then(res => {
          if (!res.code && res.data) {
            this.listData = res.data.list;
            uni.hideLoading();
          } else {
            uni.showToast({
              title: res.msg,
              duration: 2000,
              mask: true,
              icon: 'none',
            });
          }
        })
        .catch(err => {
          uni.showToast({
            title: this.$t('facePay.requestFail'),
            duration: 2000,
            mask: true,
            icon: 'none',
          });
        });
    },
    // 点击了优惠券详情
    clickItem(e) {
      this.handleItem = e;
      this.showCouponSummary = !this.showCouponSummary;
    },
    onClickUse: function (item) {
      uni.setStorageSync('store_id', item.store_id);
      // #ifdef H5
      this.$utils.toUrl('/pages/home/home?store_id=' + item.store_id);
      // #endif
      // #ifndef H5
      this.$utils.toUrl('/pages/home/home', 'switchtab');
      // #endif
    },
    // 点击去使用按钮
    receiveItem(item) {
      // 如果当前storeID和优惠券storeID一致，则跳转到首页；如果不一致，则显示操作弹窗，跳转小程序或者导航到店
      if (item.is_receive == 1) return;
      uni.showLoading({
        title: this.$t('facePay.drawing'),
      });
      this.$allrequest.facePay
        .receiveCoupon({ id: item.id, store_id: item.store_id })
        .then(res => {
          uni.hideLoading();
          if (!res.code && res.data) {
            uni.showToast({
              title: this.$t('coupon.success'),
              icon: 'none',
              duration: 2000,
              mask: true,
            });
            // 刷新优惠券列表
            this.storeCouponList();
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
              mask: true,
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$bgcolor: #f2f2f2;
.page {
  width: 100%;
  min-height: 100vh;
  background-color: $bgcolor;

  .page-content {
    width: 100%;

    .list-section {
      width: 100%;
      padding-top: 20rpx;
      .coupon-item {
        position: relative;
        margin: 0 24rpx;
        margin-bottom: 20rpx;
        background: #fff;
        border-radius: 20rpx;
        .date-price {
          padding: 30rpx;
          > view:nth-child(1) {
            flex: 1;
            width: 0;
            .title {
              font-size: 30rpx;
              font-weight: 600;
            }
            .date {
              margin-top: 12rpx;
              font-size: 22rpx;
              color: #8c8c8c;
            }
          }
          .price-box {
            > view:nth-child(1) {
              font-size: 28rpx;
              font-weight: 600;
              color: #f0250e;
            }
            > view:nth-child(2) {
              font-size: 22rpx;
              color: #8c8c8c;
            }
          }
        }
        .note {
          position: relative;
          padding: 15rpx 30rpx;
          border-top: 1px dashed #ededed;
          &::after {
            content: '';
            position: absolute;
            left: -10rpx;
            top: -10rpx;
            width: 20rpx;
            height: 20rpx;
            background: $bgcolor;
            border-radius: 50%;
          }
          &::before {
            content: '';
            position: absolute;
            right: -10rpx;
            top: -10rpx;
            width: 20rpx;
            height: 20rpx;
            background: $bgcolor;
            border-radius: 50%;
          }
          .left {
            flex: 1;
            width: 0;
            /deep/.u-iconfont {
              color: #8c8c8c !important;
            }
            /deep/.u-collapse-head {
              justify-content: flex-start;
              line-height: 48rpx;
              padding: 0;
              color: #8c8c8c;
            }
            /deep/.u-collapse-title {
              flex: initial;
              font-size: 24rpx;
              color: #8c8c8c;
            }
            /deep/.u-collapse-content {
              font-size: 24rpx;
              color: #8c8c8c;
            }
          }
          // 按钮
          .btn-groups {
            margin-left: 10rpx;
            display: flex;
            justify-content: flex-end;
            view {
              width: 144rpx;
              height: 48rpx;
              line-height: 48rpx;
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              text-align: center;
              border-radius: 24rpx;
            }
            .use-btn {
              background: #f0250e;
              color: #fff;
            }
            .go-with {
              background: #fee8e6;
              color: #f0250e;
            }

            .share-btn {
              background: #ffffff;
              border: 2rpx solid #999999;
              color: #191919;
              position: relative;
              button {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 11;
                opacity: 0;
              }
            }
          }
        }
        .status {
          position: absolute;
          right: 0;
          top: 0;
          padding: 0 10rpx;

          border-radius: 0px 20rpx 0px 12rpx;
          line-height: 28rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #f0250e;
          background: #fee8e6;
        }
      }
      // .list-item {
      //     width: 702rpx;
      //     min-height: 226rpx;
      //     background: #ffffff;
      //     border-radius: 24rpx;
      //     margin-bottom: 24rpx;

      //     .coupon-top {
      //         display: flex;
      //         align-items: center;
      //         justify-content: space-between;
      //         padding: 35rpx 45rpx 30rpx 30rpx;
      //         border-bottom: 2rpx dashed #eeeeee;

      //         .coupon-name {
      //             display: flex;
      //             align-content: center;
      //             line-height: 44rpx;
      //             font-family: PingFang SC;
      //             image {
      //                 width: 80rpx;
      //                 height: 80rpx;
      //                 background: #f2f2f2;
      //                 border-radius: 10rpx;
      //                 margin-right: 24rpx;
      //             }
      //             .coupon-summary {
      //                 view:nth-child(1) {
      //                     font-size: 32rpx;
      //                     font-weight: 500;
      //                     color: #262626;
      //                     line-height: 1;
      //                     margin-bottom: 24rpx;
      //                     overflow: hidden;
      //                     white-space: nowrap;
      //                     text-overflow: ellipsis;
      //                     max-width: 330rpx;
      //                 }
      //                 view:nth-child(2) {
      //                     font-size: 22rpx;
      //                     font-weight: 400;
      //                     color: #8c8c8c;
      //                     line-height: 1;
      //                 }
      //             }
      //         }

      //         .coupon-price {
      //             text-align: right;

      //             view:nth-child(1) {
      //                 color: #f7271f;
      //                 font-family: PingFang SC;
      //                 font-weight: 500;
      //                 display: flex;
      //                 align-items: baseline;
      //                 justify-content: flex-end;
      //                 font-size: 56rpx;
      //                 margin-bottom: 12rpx;
      //                 line-height: 1;

      //                 text:first-child {
      //                     font-size: 28rpx;
      //                 }
      //             }

      //             view:nth-child(2) {
      //                 font-size: 22rpx;
      //                 font-family: PingFang SC;
      //                 font-weight: 400;
      //                 color: #8c8c8c;
      //                 line-height: 1;
      //             }
      //         }
      //     }

      //     .coupon-down {
      //         padding: 24rpx 46rpx 30rpx 35rpx;
      //         .coupon-down-info {
      //             display: flex;
      //             align-items: center;
      //             justify-content: space-between;

      //             .coupon-fold {
      //                 display: flex;
      //                 align-items: center;
      //                 font-size: 24rpx;
      //                 font-family: PingFang SC;
      //                 font-weight: 400;
      //                 color: #8c8c8c;
      //                 line-height: 44rpx;

      //                 .bottom_arrows {
      //                     width: 16rpx;
      //                     height: 16rpx;
      //                     border-top: 1rpx solid #c3c8d6;
      //                     border-right: 1rpx solid #c3c8d6;
      //                     transform: rotate(135deg) translateY(6rpx);
      //                     margin-left: 20rpx;
      //                 }
      //             }

      //             .has-select-coupon {
      //                 .btn-groups {
      //                     display: flex;
      //                     align-items: center;
      //                     justify-content: flex-end;
      //                     view {
      //                         width: 120rpx;
      //                         height: 48rpx;
      //                         font-size: 24rpx;
      //                         font-family: PingFang SC;
      //                         font-weight: 400;
      //                         line-height: 48rpx;
      //                         text-align: center;
      //                         border-radius: 24rpx;
      //                     }
      //                     .use-btn {
      //                         background: #ff4b33;
      //                         color: #ffffff;
      //                         margin-left: 24rpx;
      //                     }

      //                     .share-btn {
      //                         background: #ffffff;
      //                         border: 2rpx solid #999999;
      //                         color: #191919;
      //                         position: relative;
      //                         button {
      //                             width: 100%;
      //                             height: 100%;
      //                             position: absolute;
      //                             left: 0;
      //                             top: 0;
      //                             z-index: 11;
      //                             opacity: 0;
      //                         }
      //                     }
      //                 }
      //             }
      //         }

      //         .coupon-summary {
      //             padding-top: 20rpx;
      //             view {
      //                 font-size: 24rpx;
      //                 font-family: PingFang SC;
      //                 font-weight: 400;
      //                 color: #8c8c8c;
      //                 margin-bottom: 20rpx;
      //             }
      //             view:last-child {
      //                 margin-bottom: 0;
      //             }
      //         }
      //     }
      // }
    }
  }
}
</style>
